<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>[laravel]基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能 - Never Give Up</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="ZhangKQ" /><meta name="description" content="基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能 一.前端页面完成 1.安装准备 安装前必须保证系统已经安装了下列软件 PHP &amp;gt;= 7.1.3 PHP OpenSSL 扩展 PHP PDO 扩展 PHP Mbstring 扩展" /><meta name="keywords" content="开发语言, php, laravel, laravels, swoole, 实时弹幕" />






<meta name="generator" content="Hugo 0.92.0 with theme even" />


<link rel="canonical" href="https://blog.nevergiveup.tech/post/dev_language/php/laravel/%E5%AE%9E%E6%97%B6%E5%BC%B9%E5%B9%95%E5%8A%9F%E8%83%BDlaravel-swoole-vue/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">



<link href="/sass/main.min.b5a744db6de49a86cadafb3b70f555ab443f83c307a483402259e94726b045ff.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="[laravel]基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能" />
<meta property="og:description" content="基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能 一.前端页面完成 1.安装准备 安装前必须保证系统已经安装了下列软件 PHP &gt;= 7.1.3 PHP OpenSSL 扩展 PHP PDO 扩展 PHP Mbstring 扩展" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://blog.nevergiveup.tech/post/dev_language/php/laravel/%E5%AE%9E%E6%97%B6%E5%BC%B9%E5%B9%95%E5%8A%9F%E8%83%BDlaravel-swoole-vue/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2019-06-11T16:37:56+08:00" />
<meta property="article:modified_time" content="2022-02-10T16:37:56+08:00" />

<meta itemprop="name" content="[laravel]基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能">
<meta itemprop="description" content="基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能 一.前端页面完成 1.安装准备 安装前必须保证系统已经安装了下列软件 PHP &gt;= 7.1.3 PHP OpenSSL 扩展 PHP PDO 扩展 PHP Mbstring 扩展"><meta itemprop="datePublished" content="2019-06-11T16:37:56+08:00" />
<meta itemprop="dateModified" content="2022-02-10T16:37:56+08:00" />
<meta itemprop="wordCount" content="1354">
<meta itemprop="keywords" content="开发语言,php,laravel,laravels,swoole,实时弹幕," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="[laravel]基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能"/>
<meta name="twitter:description" content="基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能 一.前端页面完成 1.安装准备 安装前必须保证系统已经安装了下列软件 PHP &gt;= 7.1.3 PHP OpenSSL 扩展 PHP PDO 扩展 PHP Mbstring 扩展"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">Never Give Up</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">主页</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">归档</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">标签</li>
      </a><a href="/categories/">
        <li class="mobile-menu-item">分类</li>
      </a><a href="/remark/">
        <li class="mobile-menu-item">随言碎语</li>
      </a><a href="/about/">
        <li class="mobile-menu-item">关于</li>
      </a>
  </ul>

  


</nav>

  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">Never Give Up</a>
</div>





<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">主页</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">归档</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">标签</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories/">分类</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/remark/">随言碎语</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/about/">关于</a>
      </li>
  </ul>
</nav>

    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">[laravel]基于 Laravel &#43; Swoole &#43; Vue 组件实现支持高并发的实时弹幕功能</h1>

      <div class="post-meta">
        <span class="post-time"> 2019-06-11 </span>
        <div class="post-category">
            <a href="/categories/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/"> 开发语言 </a>
            <a href="/categories/php/"> php </a>
            </div>
          <span class="more-meta"> 约 1354 字 </span>
          <span class="more-meta"> 预计阅读 3 分钟 </span>
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#基于-laravel--swoole--vue-组件实现支持高并发的实时弹幕功能"><strong>基于 Laravel + Swoole + Vue 组件实现支持高并发的实时弹幕功能</strong></a>
      <ul>
        <li><a href="#一前端页面完成"><strong>一.前端页面完成</strong></a>
          <ul>
            <li><a href="#1安装准备"><strong>1.安装准备</strong></a></li>
            <li><a href="#2下载安装nodejs"><strong>2.下载安装node.js</strong></a></li>
            <li><a href="#3laravel初始化前端依赖"><strong>3.laravel初始化前端依赖</strong></a></li>
            <li><a href="#4安装-vue-弹幕组件-vue-baberrage"><strong>4.安装 Vue 弹幕组件</strong> <strong>vue-baberrage</strong></a></li>
            <li><a href="#5引入-vue-baberrage"><strong>5.引入 vue-baberrage</strong></a></li>
            <li><a href="#6编写-danmucomponentvue"><strong>6.编写 DanmuComponent.vue</strong></a></li>
            <li><a href="#7视图中引入-danmu-component"><strong>7.视图中引入 danmu-component</strong></a></li>
            <li><a href="#8添加访问路由"><strong>8.添加访问路由</strong></a></li>
            <li><a href="#9命令编译前端资源"><strong>9.命令编译前端资源</strong></a></li>
          </ul>
        </li>
        <li><a href="#二后端代码整合"><strong>二.后端代码整合</strong></a>
          <ul>
            <li><a href="#1创建websocket服务文件"><strong>1.创建websocket服务文件</strong></a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <h1 id="基于-laravel--swoole--vue-组件实现支持高并发的实时弹幕功能"><strong>基于 Laravel + Swoole + Vue 组件实现支持高并发的实时弹幕功能</strong></h1>
<h2 id="一前端页面完成"><strong>一.前端页面完成</strong></h2>
<h3 id="1安装准备"><strong>1.安装准备</strong></h3>
<p>安装前必须保证系统已经安装了下列软件</p>
<p>PHP &gt;= 7.1.3</p>
<p>PHP OpenSSL 扩展</p>
<p>PHP PDO 扩展</p>
<p>PHP Mbstring 扩展</p>
<p>PHP Tokenizer 扩展</p>
<p>PHP XML 扩展</p>
<p>PHP Ctype 扩展</p>
<p>PHP JSON 扩展</p>
<p>PHP BCMath 扩展</p>
<h3 id="2下载安装nodejs"><strong>2.下载安装node.js</strong></h3>
<p><a href="http://nodejs.cn/download/">http://nodejs.cn/download/</a></p>
<h3 id="3laravel初始化前端依赖"><strong>3.laravel初始化前端依赖</strong></h3>
<p>npm install</p>
<h3 id="4安装-vue-弹幕组件-vue-baberrage"><strong>4.安装 Vue 弹幕组件</strong> <strong>vue-baberrage</strong></h3>
<p>npm install vue-baberrage &ndash;save</p>
<h3 id="5引入-vue-baberrage"><strong>5.引入 vue-baberrage</strong></h3>
<p>在 resources/js/app.js 中引入 vue-baberrage 组件</p>
<p>window.Vue = require(&lsquo;vue&rsquo;);</p>
<p>import {vueBaberrage} from &lsquo;vue-baberrage&rsquo;;</p>
<p>Vue.use(vueBaberrage);</p>
<p>&hellip;</p>
<p>Vue.component(&lsquo;tasks-component&rsquo;, require('./components/TasksComponent.vue').default);</p>
<p>Vue.component(&lsquo;danmu-component&rsquo;, require('./components/DanmuComponent.vue').default);</p>
<h3 id="6编写-danmucomponentvue"><strong>6.编写 DanmuComponent.vue</strong></h3>
<p>resources/js/components/DanmuComponent.vue</p>
<style lang="scss" scoped>

​    #danmu {

​        font-family: 'Avenir', Helvetica, Arial, sans-serif;

​        -webkit-font-smoothing: antialiased;

​        -moz-osx-font-smoothing: grayscale;

​        text-align: center;

​        color: #2c3e50;

​    }

​    .stage {

​        height: 300px;

​        width: 100%;

​        background: #025d63;

​        margin: 0;

​        position: relative;

​        overflow: hidden;

​    }

 

​    h1, h2 {

​        font-weight: normal;

​    }

​    ul {

​        list-style-type: none;

​        padding: 0;

​    }

​    li {

​        display: inline-block;

​        margin: 0 10px;

​    }

 

​    a {

​        color: #42b983;

​    }

 

​    .baberrage-stage {

​        z-index: 5;

​    }

 

​    .baberrage-stage .baberrage-item.normal{

​        color:#FFF;

​    }

​    .top{

​        border:1px solid #66aabb;

​    }

​    .danmu-control{

​        position: absolute;

​        margin: 0 auto;

​        width: 100%;

​        bottom: 300px;

​        top: 70%;

​        height: 69px;

​        box-sizing: border-box;

​        text-align: center;

​        display: flex;

​        justify-content: center;

​        div {

​            width: 300px;

​            background: rgba(0, 0, 0, 0.6);

​            padding: 15px;

​            border-radius: 5px;

​            border: 2px solid #8ad9ff;

​        }

​        input,button,select{

​            height:35px;

​            padding:0;

​            float:left;

​            background:#027fbb;

​            border:1px solid #CCC;

​            color:#FFF;

​            border-radius:0;

​            width:18%;

​            box-sizing: border-box;

​        }

​        select{

​            height:33px;

​            margin-top:1px;

​            border: 0px;

​            outline: 1px solid rgb(204,204,204);

​        }

​        input{

​            width:64%;

​            height:35px;

​            background:rgba(0,0,0,.7);

​            border:1px solid #8ad9ff;

​            padding-left:5px;

​            color:#FFF;

​        }

​    }

</style>
<template>
<p>​    <div id="danmu"></p>
<p>​        <div class="stage"></p>
<p>​            &lt;vue-baberrage</p>
<p>​                    :isShow = &ldquo;barrageIsShow&rdquo;</p>
<p>​                    :barrageList = &ldquo;barrageList&rdquo;</p>
<p>​                    :loop = &ldquo;barrageLoop&rdquo;</p>
<p>​                    :maxWordCount = &ldquo;60&rdquo;</p>
<p>​            &gt;</p>
<p>​            </vue-baberrage></p>
<p>​        </div></p>
<p>​        <div class="danmu-control"></p>
<p>​            <div></p>
<p>​                <select v-model="position"></p>
<p>​                    <option value="top">从上</option></p>
<p>​                    <option value="abc">从右</option></p>
<p>​                </select></p>
<p>​                <input type="text" style="float:left"  v-model="msg"/></p>
<p>​                &lt;button type=&ldquo;button&rdquo; style=&ldquo;float:left&rdquo; @click=&ldquo;addToList&rdquo;&gt;发送</button></p>
<p>​            </div></p>
<p>​        </div></p>
<p>​    </div></p>
</template>
<script>

​    import { MESSAGE_TYPE } from 'vue-baberrage'

 

​    export default {

​        name: 'danmu',

​        data () {

​            return {

​                msg: '你好，学院君！',

​                position: 'top',

​                barrageIsShow: true,

​                currentId: 0,

​                barrageLoop: false,

​                barrageList: []

​            }

​        },

​        methods: {

​            removeList () {

​                this.barrageList = []

​            },

​            addToList () {

​                if (this.position === 'top') {

​                    this.barrageList.push({

​                        id: ++this.currentId,

​                        avatar: 'https://laravelacademy.org/assets/avatars/numxwdxf8lrtrsol.jpg',

​                        msg: this.msg + this.currentId,

​                        barrageStyle: 'top',

​                        time: 8,

​                        type: MESSAGE_TYPE.FROM_TOP,

​                        position: 'top'

​                    })

​                } else {

​                    this.barrageList.push({

​                        id: ++this.currentId,

​                        avatar: 'https://laravelacademy.org/assets/avatars/numxwdxf8lrtrsol.jpg',

​                        msg: this.msg,

​                        time: 15,

​                        type: MESSAGE_TYPE.NORMAL

​                    })

​                }

​            }

​        }

​    }

</script>
<h3 id="7视图中引入-danmu-component"><strong>7.视图中引入 danmu-component</strong></h3>
<p>@extends(&lsquo;layouts.app&rsquo;)</p>
<p>@section(&lsquo;content&rsquo;)</p>
<p>​    <danmu-component></danmu-component></p>
<p>@endsection</p>
<h3 id="8添加访问路由"><strong>8.添加访问路由</strong></h3>
<p>routes/web.php</p>
<p>Route::get('/danmu', function() {</p>
<p>​    return view(&lsquo;danmu&rsquo;);</p>
<p>});</p>
<h3 id="9命令编译前端资源"><strong>9.命令编译前端资源</strong></h3>
<p>npm run dev</p>
<h2 id="二后端代码整合"><strong>二.后端代码整合</strong></h2>
<h3 id="1创建websocket服务文件"><strong>1.创建websocket服务文件</strong></h3>
<p>创建文件:app/Handlers/WebSocketHandler.php</p>
<?php

namespace App\Handlers;

 

use Hhxsv5\LaravelS\Swoole\WebSocketHandlerInterface;

use Illuminate\Support\Facades\Log;

use Swoole\Http\Request;

use Swoole\WebSocket\Frame;

use Swoole\WebSocket\Server;

 

class WebSocketHandler implements WebSocketHandlerInterface

{

​    public function __construct()

​    {

 

​    }

 

​    // 连接建立时触发

​    public function onOpen(Server $server, Request $request)

​    {

​        Log::info('WebSocket 连接建立:' . $request->fd);

​    }

 

​    // 收到消息时触发

​    public function onMessage(Server $server, Frame $frame)

​    {

​        // $frame->fd 是客户端 id，$frame->data 是客户端发送的数据

​        Log::info("从 {$frame->fd} 接收到的数据: {$frame->data}");

​        foreach($server->connections as $fd){

​            if (!$server->isEstablished($fd)) {

​                // 如果连接不可用则忽略

​                continue;

​            }

​            $server->push($fd , $frame->data); // 服务端通过 push 方法向所有连接的客户端发送数据

​        }

​    }

 

​    // 连接关闭时触发

​    public function onClose(Server $server, $fd, $reactorId)

​    {

​        Log::info('WebSocket 连接关闭:' . $fd);

​    }

}

 

### **2.配置websocket服务端文件生效**

config/laravels.php中配置这个 WebSocketHandler

 

'websocket' => [

​    'enable' => true,

​    'handler' =>  \App\Handlers\WebSocketHandler::class,

],

 

### **3.在 Nginx 中配置支持 WebSocket 通信**

 

详情查看laravelS

 

 

### **4.Vue 组件与 WebSocket 服务器通信**

 

<template>

​    <div id="danmu">

​        <div class="stage">

​            <vue-baberrage

​                    :isShow= "barrageIsShow"

​                    :barrageList = "barrageList"

​                    :loop = "barrageLoop"

​                    :maxWordCount = "60"

​            >

​            </vue-baberrage>

​        </div>

​        <div class="danmu-control">

​            <div>

​                <select v-model="position">

​                    <option value="top">从上</option>

​                    <option value="abc">从右</option>

​                </select>

​                <input type="text" style="float:left"  v-model="msg"/>

​                <button type="button" style="float:left" @click="sendMsg">发送</button>

​            </div>

​        </div>

​    </div>

</template>

<script>

​    import { MESSAGE_TYPE } from 'vue-baberrage'

 

​    export default {

​        name: 'danmu',

​        data () {

​            return {

​                msg: '你好，学院君！',

​                position: 'top',

​                barrageIsShow: true,

​                currentId: 0,

​                barrageLoop: false,

​                websocket: null,

​                barrageList: []

​            }

​        },

​        created () {

​            // 初始化 websocket 并定义回调函数

​            this.websocket = new WebSocket("ws://laravelsk.dy2.cn/ws");

​            this.websocket.onopen = function (event) {

​                console.log("已建立 WebSocket 连接");

​            };

​            let that = this;

​            this.websocket.onmessage = function (event) {

​                // 接收到 WebSocket 服务器返回消息时触发

​                let data = JSON.parse(event.data);

​                that.addToList(data.position, data.message);

​            };

​            this.websocket.onerror = function (event) {

​                console.log("与 WebSocket 通信出错");

​            };

​            this.websocket.onclose = function (event) {

​                console.log("断开 WebSocket 连接");

​            };

​        },

​        destroyed () {

​            this.websocket.close();

​        },

​        methods: {

​            removeList () {

​                this.barrageList = []

​            },

​            addToList (position, message) {

​                if (position === 'top') {

​                    this.barrageList.push({

​                        id: ++this.currentId,

​                        avatar: 'https://laravelacademy.org/assets/avatars/numxwdxf8lrtrsol.jpg',

​                        msg: message,

​                        barrageStyle: 'top',

​                        time: 8,

​                        type: MESSAGE_TYPE.FROM_TOP,

​                        position: 'top'

​                    })

​                } else {

​                    this.barrageList.push({

​                        id: ++this.currentId,

​                        avatar: 'https://laravelacademy.org/assets/avatars/numxwdxf8lrtrsol.jpg',

​                        msg: message,

​                        time: 15,

​                        type: MESSAGE_TYPE.NORMAL

​                    })

​                }

​            },

​            sendMsg () {

​                // 发送消息到 WebSocket 服务器

​                this.websocket.send('{"position":"' + this.position + '", "message":"' + this.msg + '"}');

​            },

​        }

​    }

</script>

 

### **5.命令编译前端资源**

 

npm run dev

 

### **6.访问url查看效果**

 

http://laravelsk.dy2.cn/danmu

 

 

 

 
    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">ZhangKQ</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2022-02-10
        
    </span>
  </p>
  
  
</div>
<div class="post-reward">
  <input type="checkbox" name="reward" id="reward" hidden />
  <label class="reward-button" for="reward">赞赏支持</label>
  <div class="qr-code">
    
    <label class="qr-code-image" for="reward">
        <img class="image" src="/qrcode/wechat-qr-code.jpg">
        <span>微信打赏</span>
      </label>
    <label class="qr-code-image" for="reward">
        <img class="image" src="/qrcode/alipay-qr-code.jpg">
        <span>支付宝打赏</span>
      </label>
  </div>
</div><footer class="post-footer">
      <div class="post-tags">
          <a href="/tags/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/">开发语言</a>
          <a href="/tags/php/">php</a>
          <a href="/tags/laravel/">laravel</a>
          <a href="/tags/laravels/">laravels</a>
          <a href="/tags/swoole/">swoole</a>
          <a href="/tags/%E5%AE%9E%E6%97%B6%E5%BC%B9%E5%B9%95/">实时弹幕</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/post/dev_language/php/laravel/%E5%9C%A8%E7%BA%BF%E8%81%8A%E5%A4%A9%E7%B3%BB%E7%BB%9Flaravel-swoole-redis-vue/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">[laravel]在线聊天系统(laravel swoole redis vue)</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/post/dev_language/php/laravel/laravels%E5%AE%89%E8%A3%85%E5%8F%8A%E4%BD%BF%E7%94%A8/">
            <span class="next-text nav-default">[laravel]laravelS安装及使用</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:wdyxzkq@163.com" class="iconfont icon-email" title="email"></a>
      <a href="https://github.com/dysoso" class="iconfont icon-github" title="github"></a>
      <a href="https://gitee.com/dysoso" class="iconfont icon-gitlab" title="gitlab"></a>
  <a href="https://blog.nevergiveup.tech/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://blog.nevergiveup.tech/">blog.nevergiveup.tech</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy; 
    2021 - 
    2022<span class="heart"><i class="iconfont icon-heart"></i></span><span><a href="https://beian.miit.gov.cn/">蜀ICP备2021005948号-1</a></span>
  </span>
</div>

    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/js/main.min.c99b103c33d1539acf3025e1913697534542c4a5aa5af0ccc20475ed2863603b.js"></script>


<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'never-give-up', 'auto');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>







</body>
</html>
